<template>
  <s-layout :title="''" navbar="normal" leftIconColor="#ffffff" :autoBack="false" :positionAbsolute="'position: absolute;'" :leftIcon="''" :bgColor="state.bgColor" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }" :onShareAppMessage="shareInfo">
    <view class="background" :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/staff_v1/profile_bg1@2v1.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px'}">
      <!-- 个人信息盒子 -->
      <view class="Personal_information_box">
        <view class="flex">
          <view class="Head_box">
            <up-avatar class="avatar" v-if="userStore.isLogin" :font-size="14" :src="`${baseUrl}${userStore.userInfo.avatar}`" :size="state.size"></up-avatar>
            <up-avatar v-else :font-size="14" :src="state.src" :size="state.size"></up-avatar>
            <view class="displaySwitch" v-if="userStore.isLogin">
              <image v-if="userStore.userInfo.gender == 0" :src="`${baseUrl}/uploads/uniapp_image/staff_v1/personal__icon_woman.png`" mode="scaleToFill"/>
              <image v-else :src="`${baseUrl}/uploads/uniapp_image/staff_v1/personal_icon_man.png`" mode="scaleToFill"/>
            </view>
          </view>
          <view>
            <view class="nickname" v-if="userStore.isLogin">{{ userStore.userInfo.nickname }}</view>
            <view class="job_phone_box">
              <view class="Job_title">
                <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_Jobtitle@2v1.png`" mode="scaleToFill"/></view>
                <view class="Job">{{ userStore.userInfo.group?.name }}</view>
              </view>
              <view><up-text class="phone" mode="phone" :text="userStore.userInfo.mobile" format="encrypt" :color="'#333'" :size="'28rpx'" :margin="'4rpx 0  0 0'"></up-text></view>
            </view>
          </view>
        </view>

        <view>
          <view class="Edit_data">
            <view class="button" @tap="editDatapage">
              <view class="text">编辑资料</view>
              <view class="icon">
                <u-icon name="arrow-right" color="#FFFFFF" size="10" :bold="true"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="per_port area">

        <!-- 上半部分盒子 -->
        <view class="per_port_box">
          <view class="per_port_left">
            <view class="port_name">当前为员工端</view>
            <view class="subordinate_companies">{{ userStore.userInfo.department.company.name }} · {{ userStore.userInfo.department.deparment.name }}</view>
          </view>
          <view class="per_port_right" @tap="switchUser" v-if="userStore.isLogin && userStore.userInfo.group_id != 1">
            <view class="image">
              <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_switch.png`" mode="scaleToFill"/>
            </view>
            <view class="Toggle_name">切换至用户端</view>
          </view>
        </view>

        <!-- 下半部分盒子 -->
        <view  class="menu">
          <view class="for_menu" v-for="(item, index) in menu_one" :key="index" @tap="item.bindtap">
            <template>
              <view class="text">{{ item.num }}</view>
              <view class="title">{{ item.title }}</view>
            </template>
          </view>
        </view>

      </view>

      <view class="advertising area">
        <image :src="`${baseUrl}/uploads/uniapp_image/user/user_user_center.png`" mode="scaleToFill"/>
      </view>

      <scroll-view 
        class="scroll-view"
      scroll-y> 
        <!-- 资金管理模块 -->
        <view class="in_common_use area">
          <view class="in_common_use_title">资金管理</view>
          <view class="flex wrap">
            <view class="module_item" @tap="goUrl('/subpackage/user/user/my_wallet')">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_wodeqianbao.png`" mode="scaleToFill"/></view>
              <view class="item_name">我的钱包</view>
              <view class="placeholder"></view>
            </view>
            <view class="module_item" @tap="goUrl('/subpackage/staff/workbench/returned_info/returned_info_list')">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_huikuan.png`" mode="scaleToFill"/></view>
              <view class="item_name">回款账户</view>
              <view class="placeholder"></view>
            </view>
            <view class="module_item" @tap="goUrl('/subpackage/staff/user/salary_slip/salary_slip')">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_gongzitiao.png`" mode="scaleToFill"/></view>
              <view class="item_name">工资条</view>
              <view class="placeholder"></view>
            </view>
            <!-- <view class="module_item" @tap="goUrl('/subpackage/staff/user/payroll_record/payroll_record')" v-if="jurisdiction.includes(group_id)">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_faxinjilu.png`" mode="scaleToFill"/></view>
              <view class="item_name">发薪记录</view>
              <view class="placeholder"></view>
            </view> -->
          </view>
        </view>

        <!-- 邀请管理模块 -->
        <view class="in_common_use area">
          <view class="in_common_use_title">邀请管理</view>
          <view class="flex wrap">
            <view class="module_item" @tap="promotional_poster">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_tuiguang.png`" mode="scaleToFill"/></view>
              <view class="item_name">推广海报</view>
              <view class="placeholder"></view>
            </view>
            <view class="module_item" @tap="invite_colleagues">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_yaoqing.png`" mode="scaleToFill"/></view>
              <view class="item_name">邀请同事</view>
              <view class="placeholder"></view>
            </view>
            <view class="module_item" @tap="outsourcing">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_yaoqingdaili.png`" mode="scaleToFill"/></view>
              <view class="item_name">邀请外包</view>
              <view class="placeholder"></view>
            </view>
            <!-- <view class="module_item" @tap="goUrl('/subpackage/user/user/my_agent/my_agent')">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_wodedaili.png`" mode="scaleToFill"/></view>
              <view class="item_name">我的代理</view>
              <view class="placeholder"></view>
            </view> -->
            <view class="module_item" @tap="goUrl('/subpackage/user/user/Invite_labor_dispatch')">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_laowupaiqian@2.png`" mode="scaleToFill"/></view>
              <view class="item_name">邀请劳务派遣</view>
              <view class="placeholder"></view>
            </view>
            <view class="module_item" @tap="goUrl('/subpackage/staff/workbench/staff/my_dispatch_list')">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_kaoqin.png`" mode="scaleToFill"/></view>
              <view class="item_name">派遣工人</view>
              <view class="placeholder"></view>
            </view>
            <view class="module_item" @tap="goUrl('/subpackage/staff/workbench/staff/my_epiboly_list')">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_kaoqin.png`" mode="scaleToFill"/></view>
              <view class="item_name">外包工人</view>
              <view class="placeholder"></view>
            </view>
          </view>
        </view>

        <!-- 其他功能模块 -->
        <view class="in_common_use area">
          <view class="in_common_use_title">其他功能</view>
          <view class="flex wrap">
            <view class="module_item" @tap="goUrl('/subpackage/staff/workbench/attendance_record/attendance_record')">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_kaoqin.png`" mode="scaleToFill"/></view>
              <view class="item_name">考勤统计</view>
              <view class="placeholder"></view>
            </view>
           
            <!-- <view class="module_item" @tap="goUrl('/subpackage/user/task/order_registration')">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_jiedanbaoming@2.png`" mode="scaleToFill"/></view>
              <view class="item_name">接单报名</view>
              <view class="placeholder"></view>
            </view> -->
            <view class="module_item" @tap="goUrl('/pages/public/auth/real_authentication')" v-if="sheep.$store('user')?.userInfo.is_authentication">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_zhaopin.png`" mode="scaleToFill"/></view>
              <view class="item_name">实名认证</view>
              <view class="placeholder"></view>
            </view>
            <view class="module_item" @tap="onProtocol(6,'帮助中心')">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/编组.png`" mode="scaleToFill"/></view>
              <view class="item_name">操作手册</view>
              <view class="placeholder"></view>
            </view>
            <view class="module_item" @tap="onLogout" v-if="isLogin">
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_tuichu.png`" mode="scaleToFill"/></view>
              <view class="item_name">退出登录</view>
              <view class="placeholder"></view>
            </view>
          </view>
        </view>
      </scroll-view>

    </view>
  </s-layout>
</template>

<script setup>
  import { ref,computed, reactive } from "vue";
  import { baseUrl } from "@/sheep/config";
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  const userStore = sheep.$store('user');
  const { safeAreaInsets } = uni.getSystemInfoSync()
  import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';

  onLoad(() => {
    const userStoreValue = uni.getStorageSync('user-store');
    const userStoreObject = JSON.parse(userStoreValue)
    group_id.value = userStoreObject.userInfo.group_id
  })

  const menu_one = ref([
    {
      title: "出勤",
      num: 0
    },
    {
      title: "外勤",
      num: 0
    },
    {
      title: "早退",
      num: 0
    }
  ]);

  const jurisdiction = ref([3,5,6])
  const group_id = ref()

  // 状态
  const state = ref({
    data:{
      title:'黑龙江省中远人力资源服务有限公司',
      // image:'',
      subtitle:'33333333',
      id:'1'
    },
    bgColor: "rgba(0,0,0,0)", // 导航条背景
    size: "120rpx", //  头像尺寸
    src: `${baseUrl}/uploads/uniapp_image/user/myavatar_defult@2.png`, // 头像地址
    text: "暂无头像", // 无头像显示
  })
  //切换端口
  const switchUser = ()=>{
    userStore.setActive(0)
    userStore.setStayPort('user')
    userStore.setabPort('user')
    sheep.$router.go('/pages/user/index/index')
  }
  // 跳转编辑资料页
  const editDatapage = () => {
    sheep.$router.go('/subpackage/user/user/edit_data')
  }
  //页面跳转
  const goUrl = (url)=>{
    if(url){
      sheep.$router.go(url);
    }else{
      sheep.$helper.toast('暂时没有开通')
    } 
  }

  // 弹窗开关
  const shareInfo_Switch = ref(0)


// 邀请外包
const outsourcing=()=> {
  sheep.$router.go('/subpackage/user/user/invite_outsourcing')
  }
  // 邀请同事弹窗
  const invite_colleagues =()=> {
    sheep.$router.go('/subpackage/user/user/Invite_colleague')
    
  }

  // 推广海报弹窗
  function promotional_poster() {
    shareInfo_Switch.value = 1
      showShareModal();
    }

  // 用户信息
  const userInfo = computed(() => sheep.$store('user').userInfo);

  const shareInfo = computed(() => {
    switch (shareInfo_Switch.value) {
      case 0:
        return sheep.$platform.share.getShareInfo(
        {
          title: '暂无数据',
          desc: '暂无数据',
          params: {
            page: '4',
            query: '0',
          },
        },
        {
          type: 'agency', // 邀请代理海报
        },
      );
        break;
    
      case 1:
        return sheep.$platform.share.getShareInfo(
          {
            title: '',
            desc: '',
            params: {
              page: '1',
              query: '0',
            },
          },
          {
            type: 'user', // 推广海报
          },
        );
        break;
    }
  });

  // 退出登录
  function onLogout() {
    uni.showModal({
      title: '提示',
      content: '确认退出账号？',
      success: async function (res) {
        if (res.confirm) {
          const result = await sheep.$store('user').logout();
          if (result) {
            userStore.setActive(0)
            userStore.setStayPort('user')
            sheep.$router.go('/pages/user/index/index');
          }
        }
      },
    });
  }

  // 是否登录
  const isLogin = computed(() => sheep.$store('user').isLogin);
  // 接收参数
  const props = defineProps({
    background: {
      type: String,
      default: '',
    },
    // 头像
    avatar: {
      type: String,
      default: '',
    },
    nickname: {
      type: String,
      default: '请先登录',
    },
    vip: {
      type: [String, Number],
      default: '1',
    },
    collectNum: {
      type: [String, Number],
      default: '1',
    },
    likeNum: {
      type: [String, Number],
      default: '1',
    },
  });

  // 查看协议
  function onProtocol(id, title) {
    // sheep.$router.go('/pages/public/richtext', {
    //   id,
    //   title,
    // });
    sheep.$router.go('/subpackage/user/user/help-document', {
      type:1
    });
  }
</script>

<style lang="scss" scoped>
  page {
    width: 100%;
    height: 100%;
  }

  .flex {
    display: flex;
    align-items: center;
  }

  .wrap {
    flex-wrap: wrap;
  }

  .area {
    margin: 0 20rpx;
  }

  .background {
    height: 800rpx;
    background-size: 100%;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
  }
  // 个人信息盒子
  .Personal_information_box {
    display: flex;
    justify-content: space-between;
    margin-top: 80rpx;

    .Head_box {
      margin-left: 40rpx;
      margin-right: 28rpx;
      // 显示开关盒子
      .displaySwitch {
        position: relative;
        image {
          height: 30rpx;
          width: 30rpx;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
    .nickname {
      font-family: PingFangSC;
      font-weight: $uni-font-weight;
      font-size: 36rpx;
      font-style: normal;
      text-decoration: none;
      text-align: left;
      margin-bottom: 16rpx;
      margin-top: 10rpx;
    }
    // 职位名称和手机号盒子
    .job_phone_box {
      display: flex;
      align-items: center;
      // 职位名称
      .Job_title {
        padding: 2rpx 10rpx 4rpx 10rpx;
        display: flex;
        align-items: center;
        // width: 80rpx;
        height: 28rpx;
        border-radius: 8.5px;
        border: 1px solid $uni-color-primary;
        margin-right: 10rpx;
        .image {
          width: 15rpx;
          height: 18rpx;
          display: flex;
          align-items: center;
          margin-right: 4rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .Job {
          font-family: PingFangSC;
          color: $uni-color-primary;
          font-weight: 500;
          font-size: 20rpx;
          font-style: normal;
          text-decoration: none;
        }
      }
    }
    // 编辑资料按钮
    .Edit_data {
      width: 35%;
      height: 100%;
      position: relative;
      .button {
        padding-right: 0;
        width: 165rpx;
        height: 46rpx;
        font-family: PingFangSC;
        color: #FFFFFF;
        font-weight: 550;
        font-size: $uni-font-size-sm;
        font-style: normal;
        text-decoration: none;
        line-height: 46rpx;
        border-radius: 12px;
        background-color: rgba(0, 0, 0, 0.5);
        border: 2px solid #FFFFFF;
        position: absolute;
        bottom: 0;
        right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          margin-left: 5rpx;
          margin-top: 3rpx;
        }
      }
    }
  }

  // 切换端口盒子
  .per_port {
    // width: calc(100% - 100rpx);
    padding: 20rpx 30rpx 30rpx 30rpx;
    margin-top: 20rpx;
    height: 260rpx;
    border-radius: 8px;
    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    // 上半部分盒子
    .per_port_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 20rpx 24rpx 40rpx;
      height: 82rpx;
      border-radius: 29.5px;
      background-color: #FFFFFF;
      border: 1px solid rgba(247, 138, 0, 0.3);
      box-shadow: 0px 5px 10px 0px rgba(255, 221, 83, 0.05);
      margin-bottom: 30rpx;
      .per_port_left {
        .port_name {
          margin-bottom: 12rpx;
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: 700;
          font-size: 30rpx;
          font-style: normal;
          text-decoration: none;
          text-align: left;
        }
        .subordinate_companies {
          font-family: PingFangSC;
          color: #999999;
          font-weight: 500;
         font-size:$uni-font-size-26;
          font-style: normal;
          text-decoration: none;
          text-align: left;
        }
      }
      .per_port_right {
        padding: 12rpx 12rpx 12rpx 14rpx;
        // width: 108rpx;
        height: 34rpx;
        border-radius: 14.5px;
        background-color: rgba(255, 189, 128, 0.1);
        display: flex;
        align-items: center;
        .image {
          width: 26rpx;
          height: 30rpx;
          display: flex;
          align-items: center;
          margin-right: 10rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .Toggle_name {
          font-family: PingFangSC;
          color: #FF7600;
          font-weight: 500;
          font-size: $uni-font-size-sm;
          font-style: normal;
          text-decoration: none;
          text-align: right;
        }
      }
    }
    // 下半部分盒子
    .menu {
      display: flex;
      .for_menu {
        width: 33.33%;
        height: calc(100% - 40rpx);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .text {
          font-family: PingFangSC;
          font-weight: $uni-font-weight;
          font-size: 44rpx;
          font-style: normal;
          text-decoration: none;
          text-align: left;
        }
        .title {
          margin-top: 16rpx;
          font-family: PingFangSC;
          color: #999999;
          font-weight: 500;
          font-size: 22rpx;
          font-style: normal;
          text-decoration: none;
          text-align: center;
        }
      }
    }


  }

  // 广告
  .advertising {
    height: 148rpx;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    image {
      height: 148rpx;
      width: 100%;
    }
  }

  // 常用功能
  .in_common_use  {
    padding: 30rpx 26rpx 0 26rpx;
    border-radius: 8px;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 20rpx;
    .in_common_use_title {
      margin-bottom: 30rpx;
      font-family: PingFangSC;
      font-size: $uni-font-size-base;
      font-style: normal;
      text-decoration: none;
    }
    .module_item {
      width: 25%;
      text-align: center;
      .image {
        height: 60rpx;
        width: 60rpx;
        margin-bottom: 12rpx;
        margin: 0 auto 12rpx auto;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .item_name {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: 500;
        font-size: 22rpx;
        font-style: normal;
        text-decoration: none;
      }
      .placeholder {
        height: 30rpx;
      }
    }
  }

  .scroll-view{
      height: 34.5vh;
    }


</style>